<template>
  <div class="basicsettings">
    <div class="basic_box">
      <div class="close" @click="close">
        <a-icon type="close" />
      </div>
      <p>基础设置</p>
      <div class="kcb_show">
        <p>库存表显示列</p>
        <!-- <a-checkbox-group @change="jcszChange"> -->
        <a-row>
          <a-col v-for="(item, i) in Displaycolumns" :key="i" :span="5" class="col_width">
            <a-checkbox
              :value="item.name"
              :defaultChecked="item.check=='true'?true:false"
              @change="checkchange"
            >{{item.name}}</a-checkbox>
            <a-input placeholder="别名" v-model="item.alias" style="width:100px;" />
          </a-col>
        </a-row>
        <!-- </a-checkbox-group> -->
      </div>
      <div class="radio_list_box">
        <div class="jghs_box">
          <p>价格含税与税率</p>
          <a-radio-group name="radioGroup" @change="taxinchange" v-model="taxincluded">
            <a-radio value="是">含税</a-radio>
            <a-radio value="否">不含税</a-radio>
          </a-radio-group>
          <div class="sl_sele">
            <span>税率：</span>
            <a-select style="width: 120px" v-model="taxrate" @change="slChange">
              <a-select-option value="1">1%</a-select-option>
              <a-select-option value="13">13%</a-select-option>
              <a-select-option value="17">17%</a-select-option>
            </a-select>
          </div>
        </div>
        <div class="Business_license">
          <p class="Business_p">
            <span>营业执照：</span>
            <a-checkbox @change="radioBusiness" :defaultChecked="isUploadLicense=='否'?false:true">必选</a-checkbox>
          </p>
          <p class="Order">
            <span>商城订购方式：</span>
            <!-- <a-radio-group name="radioGroup" v-model="OrderMethod">
              <a-radio value="订购">订购</a-radio>
              <a-radio value="询报价">询报价</a-radio>
            </a-radio-group>-->
            <a-checkbox-group @change="OrderChange" v-model="checkedList">
              <a-row>
                <a-col :span="8">
                  <a-checkbox value="订购">订购</a-checkbox>
                </a-col>
                <a-col :span="8">
                  <a-checkbox value="询报价">询报价</a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </p>
          <p>
            <span>前端未登录显示价格：</span>
            <a-radio-group name="radioGroup" v-model="Showprice">
              <a-radio value>不显示价格</a-radio>
              <a-radio value="wltejia">网络特价</a-radio>
              <a-radio value="paijia">牌价</a-radio>
              <a-radio value="wllsj">价格1</a-radio>
              <a-radio value="wlpfj">价格2</a-radio>
              <a-radio value="wlzdj">价格3</a-radio>
            </a-radio-group>
          </p>
        </div>
        <div class="Website_logo">
          <span class="inp_tit">网站logo：</span>
          <div class="clearfix">
            <a-upload
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              list-type="picture-card"
              :file-list="fileList"
              @preview="handlePreview"
              @change="handleChange"
            >
              <div v-if="fileList.length < 1">
                <a-icon type="plus" />
                <div class="ant-upload-text">Upload</div>
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </div>
        </div>
      </div>

      <div class="sub">
        <a-button @click="close">取消</a-button>
        <a-button type="primary" @click="Basicsetsub">提交</a-button>
      </div>
    </div>
  </div>
</template>

<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
import qs from "qs";
export default {
  data() {
    return {
      previewVisible: false,
      previewImage: "",
      fileList: [],
      // 商城订购方式
      checkedList:[],
      taxincluded: "否", //含税不含税
      taxrate: "1", //税率
      Showprice: "wltejia",
      Displaycolumns: [
        {
          check: false,
          key: "xl",
          name: "型号",
          alias: ""
        },
        {
          check: false,
          key: "sccjc",
          name: "品牌",
          alias: ""
        },
        {
          check: false,
          key: "zlmc",
          name: "产品分类",
          alias: ""
        },
        // {
        //   check: false,
        //   key: "pic",
        //   name: "产品图片",
        //   alias: ""
        // },
        {
          check: false,
          key: "nj",
          name: "内径",
          alias: ""
        },
        {
          check: false,
          key: "wj",
          name: "外径",
          alias: ""
        },
        {
          check: false,
          key: "kd",
          name: "宽度",
          alias: ""
        },
        {
          check: false,
          key: "zl",
          name: "重量",
          alias: ""
        },
        {
          check: false,
          key: "kfmc",
          name: "库房",
          alias: ""
        },
        {
          check: false,
          key: "sccd",
          name: "产地",
          alias: ""
        },
        {
          check: false,
          key: "cpbz",
          name: "包装",
          alias: ""
        },
        {
          check: false,
          key: "cailiao",
          name: "材料",
          alias: ""
        },
        {
          check: false,
          key: "wlkgsl",
          name: "现货数量",
          alias: ""
        },
        {
          check: false,
          key: "wltejia",
          name: "网络特价",
          alias: ""
        },
        {
          check: false,
          key: "paijia",
          name: "牌价",
          alias: ""
        },
        {
          check: false,
          key: "qhsl",
          name: "期货数量",
          alias: ""
        },
        {
          check: false,
          key: "wllsj",
          name: "价格1",
          alias: ""
        },
        {
          check: false,
          key: "wlpfj",
          name: "价格2",
          alias: ""
        },
        {
          check: false,
          key: "wlzdj",
          name: "价格3",
          alias: ""
        },
        {
          check: false,
          key: "beizhu",
          name: "备注",
          alias: ""
        },
        {
          check: false,
          key: "sfzy",
          name: "货物所在地",
          alias: ""
        },
        {
          check: false,
          key: "zdqsl",
          name: "最小起批量",
          alias: ""

        },
        {
          check: false,
          key: "price",
          name: "单价",
          alias: ""

        }
      ],
      showchecked: false,
      showvalue: "",
      isUploadLicense: "否",
      OrderMethod: ""
    };
  },

  methods: {
    taxinchange(e) {
      console.log(e);
      // if (e.target.value == "否") {
      //   this.taxrate = "0";
      // }
    },
    checkchange(e) {
      console.log(e);
      this.showchecked = e.target.checked;
      this.showvalue = e.target.value;
      for (var i = 0; i < this.Displaycolumns.length; i++) {
        if (this.showchecked) {
          if (this.Displaycolumns[i].name == e.target.value) {
            this.Displaycolumns[i].check = true;
            console.log(this.Displaycolumns[i]);
          }
        } else {
          if (this.Displaycolumns[i].name == e.target.value) {
            // this.Displaycolumns[i].check = true;
            this.Displaycolumns[i].check = false;
            console.log(this.Displaycolumns[i]);
          }
        }
      }
    },
     OrderChange(checkedValues) {
      console.log('checked = ', checkedValues);
      this.OrderMethod=checkedValues.join()
      console.log(this.OrderMethod)
    },
    // jcszChange(checkedValues) {
    //   console.log("checked = ", checkedValues);
    //   for (var i = 0; i < this.Displaycolumns.length; i++) {
    //     for (var j = 0; j < checkedValues.length; j++) {
    //       if (this.showchecked) {
    //         if (this.Displaycolumns[i].name == checkedValues[j]) {
    //           this.Displaycolumns[i].check = true;
    //           console.log(this.Displaycolumns[i]);
    //         }
    //       } else {
    //         if (this.Displaycolumns[i].name == this.showvalue) {
    //           this.Displaycolumns[i].check = false;
    //           console.log(this.Displaycolumns[i]);
    //         }
    //       }
    //     }
    //   }
    //   console.log(this.Displaycolumns);
    // },
    slChange(value) {
      console.log(`selected ${value}`);
    },
    close() {
      this.$parent.set_flag = false;
    },
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
      console.log(fileList);
    },
    radioBusiness(e) {
      console.log(e);
      if (e.target.checked) {
        this.isUploadLicense = "是";
      } else {
        this.isUploadLicense = "否";
      }
    },
    Basicsetsub() {
      console.log(this.Displaycolumns);
      console.log("价格含税", this.taxincluded);
      console.log("税率：", this.taxrate);
      console.log("前端未登录显示价格：", this.Showprice);
      // console.log("网站logo：", this.fileList[0].thumbUrl);
      var Displaycolumns = this.Displaycolumns;
      for (let i = 0; i < Displaycolumns.length; i++) {
        // const element = Displaycolumns[i];
        if (Displaycolumns[i].alias == "") {
          Displaycolumns[i].alias = Displaycolumns[i].name;
        }
      }

      var fileList = "";
      if (this.fileList.length) {
        if (
          this.fileList[0].uid == "jclb" &&
          this.fileList[0].uid != undefined
        ) {
          // fileList = this.fileList[0].url;
          fileList = this.webSiteLogo;
        } else {
          fileList = this.fileList[0].thumbUrl;
        }
      }
      console.log(this.fileList);

      this.axios
        .post(
          "quanxian/siteAdminListBaseEdit.php",
          qs.stringify({
            id_num: this.$parent.basicsvalue.id_num,
            sqdwid: this.$parent.basicsvalue.sqdwid,
            InventoryList: Displaycolumns,
            isTax: this.taxincluded,
            taxRate: this.taxrate,
            notLoginPrice: this.Showprice,
            isUploadLicense: this.isUploadLicense,
            logoPic: fileList,
            OrderMethod: this.OrderMethod
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.$notification["success"]({
              message: "成功",
              description: res.data.msg
            });
            this.close();
            this.$parent.getsiteAdminList(
              this.$parent.pagination,
              this.$parent.serchvalue
            );
          } else {
            this.$notification["error"]({
              message: "失败",
              description: res.data.msg
            });
          }
        });
    }
  },

  created() {
    if (this.$parent.basicsvalue.InventoryList != null) {
      for(var i=0;i<this.Displaycolumns.length;i++){
        for (let j = 0; j < this.$parent.basicsvalue.InventoryList.length; j++) {
          if(this.Displaycolumns[i].name.trim()==this.$parent.basicsvalue.InventoryList[j].name.trim()){
          // this.Displaycolumns[i].check==this.$parent.basicsvalue.InventoryList[j].check
                 console.log('等于')
                 break;

          }else{
            // this.$parent.basicsvalue.InventoryList.push(this.Displaycolumns[i])
            // return false;
                 console.log('不等于')
                //  console.log(this.Displaycolumns[i].name)
                 break;


          }
        }
      }


    // console.log(this.$parent.basicsvalue.InventoryList) 

      this.Displaycolumns = this.$parent.basicsvalue.InventoryList;
      // this.Displaycolumns = this.Displaycolumns;

    }
    this.taxincluded = this.$parent.basicsvalue.isTax;
    this.taxrate = this.$parent.basicsvalue.taxRate;
    this.OrderMethod = this.$parent.basicsvalue.OrderMethod;
    if(this.OrderMethod){
       this.checkedList=this.OrderMethod.split(",")
    }
    this.isUploadLicense =
      this.$parent.basicsvalue.isUploadLicense == null ||
      this.$parent.basicsvalue.isUploadLicense == "否"
        ? "否"
        : "是";
    this.Showprice = this.$parent.basicsvalue.notLoginPrice;
    if (
      this.$parent.basicsvalue.webSiteLogo != "" &&
      this.$parent.basicsvalue.webSiteLogo != null
    ) {
      this.fileList = [
        {
          uid: "jclb",
          name: " ",
          status: " ",
          url:
            "https://image.bearing.cn/cnbearing/qylg_pic/" +
            this.$parent.basicsvalue.webSiteLogo
        }
      ];
      this.webSiteLogo = this.$parent.basicsvalue.webSiteLogo;
    }
  }
};
</script>

<style lang='less'>
.basicsettings {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1000px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  .basic_box {
    position: absolute;
    left: 50%;
    top: 5%;
    transform: translateX(-50%);
    width: 80%;
    // height: 500px;
    background: #fff;
    text-align: left;
    padding: 20px;
    .ant-checkbox-wrapper {
      width: 120px;
      text-align: left;
    }
    .col_width {
      margin: 5px 0;
      width: 20%;
    }
    .kcb_show {
      border: 1px solid #f1f1f1;
      padding: 10px;
    }
    .radio_list_box {
      display: flex;
      justify-content: space-between;
      border: 1px solid #f1f1f1;
      margin-top: 20px;
      padding: 20px;
      .jghs_box {
        // border: 1px solid #f1f1f1;
        margin: 20px 0;
        padding: 20px;
        .sl_sele {
          display: inline-block;
        }
      }
      .Business_license {
        // border: 1px solid #f1f1f1;
        margin: 20px 0;
        padding: 20px;
        .Business_p {
          display: inline-block;
        }
        .Order {
          display: inline-block;
          .ant-checkbox-group {
            vertical-align: middle;
          }
        }
      }
      .Website_logo {
        .clearfix {
          display: inline-block;
          width: 80%;
          vertical-align: middle;
        }
      }
    }

    .sub {
      text-align: center;
      button {
        margin: 0 20px;
      }
    }
  }

  @media (max-width: 1600px) {
    .basic_box {
      height: 600px;
      overflow-y: scroll;
    }
  }
}
</style>
